<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Animate.css + Vue 动画示例</title>
  <link rel="stylesheet" href="../../../css/animate.css">
  <script src="../../../js/vue.js"></script>

</head>
<body>
  <div id="app">
    <button @click="toggleBox">
      {{ showBox ? '隐藏动画效果' : '显示动画效果' }}
    </button>
    <br />
    <!-- 利用 Vue 的 transition 标签，结合 Animate.css 的类名实现动画 -->
    <transition
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut">
      <!-- 当 showBox 为 true 时，该 div 会通过动画显示 -->
      <div v-if="showBox" class="demo-box">
        这是一段带有动画效果的文字！
      </div>
    </transition>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        showBox: false
      },
      methods: {
        toggleBox() {
          this.showBox = !this.showBox;
        }
      }
    });
  </script>
</body>
</html>
